<template>
  <div style="margin-top:30px;margin-right:15px">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商名称" prop="userName">
              <el-input v-model="form.userName" @change="setPartyCode" maxlength="40"
              show-word-limit class="pr46" :disabled=' isDisabled || operationType==="edit" ' placeholder="请输入入驻商名称"
              onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商编码" prop="partyCode">
              <el-input v-model="form.partyCode" :disabled='true' placeholder="组织名+入驻商名称首字母拼音"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="form.contacts" :disabled='isDisabled' placeholder="请输入联系人"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple"  >
            <el-form-item label="手机号"  prop="phone">
              <el-input v-model="form.phone" :disabled='isDisabled' placeholder="请输入手机号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="信用代码" prop="businessLicenseImgNumber">
              <el-input v-model="form.businessLicenseImgNumber" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入统一社会信用代码' " />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="法人姓名" prop="legalPerson">
              <el-input v-model="form.legalPerson" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入法人姓名' " />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
         <el-col :span="12">
          <el-form-item label="身份证号" prop="identificationNumber">
            <el-input
              v-model="form.identificationNumber"
              :disabled='isDisabled'
              :placeholder="operationType == 'detail' ? ' ' : '请输入身份证号' "
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="税点(%)" prop="taxPoint">
            <el-input v-model="form.taxPoint" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入税点' " />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
         <el-col :span="12">
          <el-form-item label="所在区域" prop="areaList">
            <el-cascader
              v-model="form.areaList"
              :options="parentData.areaOptions"
              :disabled='isDisabled'
              :placeholder="operationType == 'detail' ? ' ' : '请选择' "
              :props="{
                value: 'countyCode',
                label: 'countyName',
                children: 'children',
              }"
              style="width:227px;"
            />
          </el-form-item>
        </el-col>
       <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="form.address" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入详细地址' "/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
         <el-col :span="12">
          <div class="grid-content bg-purple" >
            <el-form-item label="是否结算" prop="settlement">
              <el-select v-model="form.settlement" placeholder="请选择是否结算" :disabled='isDisabled' clearable style="width:227px;">
                <el-option
                  v-for="item in settlementData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '备注' "/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
         <el-col :span="12">
          <div class="grid-content bg-purple" >
            <el-form-item label="对接erp" prop="erpCode">
              <el-select v-model="form.erpCode" placeholder="请选择对接erp" :disabled='isDisabled' style="width:227px;">
                <el-option
                  v-for="item in erpTypeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
         <el-col :span="12">
          <div class="grid-content bg-purple" >
            <el-form-item label="需要复核">
              <el-select v-model.number="form.review" placeholder="请选择是否需要复核" :disabled='isDisabled' style="width:227px;">
                <el-option
                  v-for="item in getEnumsOrDict('enum', 'lockStatusList')"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer w240" v-if="this.operationType === 'audit'">
      <el-button type="primary" @click="audit('3')">审核通过</el-button>
      <el-button type="danger" @click="audit('2')">审核不通过</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-if="!isDisabled">
      <el-button type="primary" @click="submitData" :disabled='isDisabled' plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
  import pinyin from 'js-pinyin'
  import { addShipperInfo, getShipperInfo, updateShipperInfo, shipperReview} from "@/api/shipment";
  import { SelectAddress } from '@/api/orderform';
  import { getListDict } from '@/api/commonApi';
  import {
    validatePhone,
    validatenumber,
    validateBusinessLicenseImgNum,
    validateIDNumber,
    validateName
  } from "@/utils/validate.js";
  export default {
    name: 'entrantsEdit',
    props: {
      operationType: {
        type: String,
        default: 'add'
      },
      operationCode: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        parentData: {
          areaOptions: []
        },   //选择区域列表
        isDisabled: ['detail', 'audit'].includes(this.operationType),
        form: {
          staffType: 0, // 默认类型
          userName: "", // 入驻商名称
          // legalName: "",
          partyCode: "", // 入住商编码
          upass: "",
          companyName: "",
          businessLicenseImgNumber: "", // 信用代码
          // prefix: "",
          taxPoint: 0,
          areaList: [], // 区域信息
          address: "",
          identificationNumber: "",
          legalPerson: "", // 法人姓名
          phone: "",
          provinceCode: "", // 省编码
          settlement: "", // 是否结算
          taxPoint: "", //税点\
          remark: "", // 备注
          review: 0, // 是否需要复核
        },
        settlementData:[
          {value:0,label:'不结算'},
          {value:1,label:'结算'}
        ],
        erpTypeList: [],
        rules: {
          userName: [
            { required: true, message: "请输入入驻商名称"},
            { max: 64, message: "长度不能超过64个字符" },
          ],
          platformShopCode: [
            {required: true, message: '请输入店铺编码'},
          ],
          address:[
             {required: false, max: 64, message: "长度不能超过64个字符" },
          ],
          contacts:[
              { required: false,  max: 36, message: "长度不能超过36个字符" },
          ],
          legalPerson:[
            {
              required:false,
              validator(rule, value, callback){
                if (!value) {
                  return callback()
                }
                validateName(value)
                ?callback()
                :callback(new Error("姓名输入格式不正确"))
              },
               trigger: "change"
            }
          ],
          // validateName
          identificationNumber:[
             {
              required:false,
              validator(rule, value, callback){
                if (!value) {
                  return callback()
                }
                validateIDNumber(value)
                ?callback()
                :callback(new Error("输入格式不正确"))
              },
               trigger: "change"
            }
          ],
          // 税点 validatenumber
          taxPoint: [
            {
              required:false,
                // 当数据为空时，不进行校验
              validator(rule, value, callback){
                if (!value) {
                  return callback()
                }
                validatenumber(value)
                ?callback()
                :callback(new Error("输入格式不正确!请输入正数"))
              }
            }
          ],
          // 统一社会信用代码
          businessLicenseImgNumber:[
            {
              required:false,
              validator(rule, value, callback){
                if (!value) {
                  return callback()
                }
                validateBusinessLicenseImgNum(value)
                ?callback()
                :callback(new Error("请检查格式是否正确"))
              }
            }
          ],
          phone: [
            {
              required: true,
              validator(rule, value, callback) {
                validatePhone(value)
                  ? callback()
                  : callback(new Error("手机号格式有误"));
              },
              trigger: "blur",
            },
          ],
          name: [
            {required: true, message: '请输入店铺名称', trigger: 'change'},
          ],
          settlement: [
            {
              required: true,
              message: "请选择是否结算",
              trigger: "blur",
            },
          ],
          partyCode: [
            { required: true, message: "请输入入驻商编码", trigger: "blur" },
            { max: 64, message: "长度不能超过64个字符", trigger: "blur" },
          ],
          legalName: [
            { required: false, max: 64, message: "长度不能超过64个字符", trigger: "change" },
          ],
          contacts: [
            { required: true, message: "请输入联系人", trigger: "blur" },
          ],
          remark: [
               { required: false, max: 64, message: "长度不能超过64个字符", trigger: "change" },
          ],
          erpCode: [
            {
              required: false,
              message: "请选择对接erp",
              trigger: "blur",
            },
          ],
        },
      }
    },
    mounted() {
      if(this.operationType !='add'){
        this.getInfo()
      }
    },
     created(){
        SelectAddress().then(response => {
          this.parentData.areaOptions = response.data.records
      })
      getListDict({types: 'erpType'}).then(res => this.erpTypeList = res.data[0].dictList)
    },
    methods: {
      setPartyCode(val) {
        pinyin.setOptions({checkPolyphone:false,charCase:0});
        let getPy = pinyin.getCamelChars(val)
        this.form.partyCode = this.$store.getters.branch.code +'_'+ getPy.toLowerCase()
      },
      // 获取页面信息
      getInfo() {
        let that = this
         getShipperInfo(this.operationCode).then(response=>{
           if(response.status === 0){
              let allArr=[];
              const { provinceCode, cityCode, countyCode } = response.data
              const areaList = [provinceCode, cityCode, countyCode];
              that.$set(response.data, 'areaList', areaList);
              that.form = response.data;
           }
         })
      },
      // 提交数据 - 新增 or 编辑
      submitData() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // const requestOperation = this.operationType === 'add' ? addShipperInfo : updateShipperInfo

             let parms = JSON.parse(JSON.stringify(this.form))
            let requestOperation = addShipperInfo
            if (this.operationType === 'add') {
              parms.createdBy = this.$store.getters.authorizeDataCode
              parms.createdName = this.$store.getters.name
            } else {
              parms.modifiedBy = this.$store.getters.authorizeDataCode
              parms.modifiedName = this.$store.getters.name
              requestOperation = updateShipperInfo
            }
            requestOperation(parms).then(res=>{
              this.$message.success(res.msg);
              if(res.status === 0){
                this.$emit('operationComplete', this.operationType)
              }
            })
          } else {
            return this.$message.error('请检查所填内容');
          }
        });
      },
      // 审核 - 通过 or 拒绝
      audit(authStatus) {
        const params = {
          authStatus,
          code: this.operationCode,
          Authorization: this.$store.getters.authorizeDataCode
        }
        shipperReview(params).then(res=>{
          this.$message.success(res.msg);
          if(res.status === 0){
            this.$emit('operationComplete', this.operationType)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
  .w240 {
    width: 240px;
  }
  .pr46 {
    ::v-deep .el-input__inner {
      padding-right: 46px !important;
    }
  }
</style>
